<template>
  <div>
    <!-- 订单列表 -->
    <el-table v-loading="loading" :data="list" style="width: 100%" size="small" @sort-change="handleSortChange">
      <el-table-column label="序号" prop="sort" align="center" min-width="60" fixed>
          <template slot-scope="scope">
              <span>{{ (scope.$index + 1) + ((page.page-1) * page.size) }}</span>
          </template>
      </el-table-column>
      <el-table-column label="名称" prop="name" align="center" min-width="100" fixed />
      <el-table-column label="归属地" prop="ownType" align="center" min-width="100">
          <template slot-scope="{row}">
            <dict-tag :options="dict.type.template_own_type" :value="row.ownType"/>
          </template>
      </el-table-column>
      <el-table-column label="分类" prop="catType" align="center" min-width="100" >
          <template slot-scope="{row}">
            <dict-tag :options="dict.type.template_cat_type" :value="row.catType"/>
          </template>
      </el-table-column>
      <el-table-column label="人群" prop="userType" align="center" min-width="100" >
          <template slot-scope="{row}">
            <dict-tag :options="dict.type.template_user_type" :value="row.userType"/>
          </template>
      </el-table-column>
      <el-table-column label="性别" align="center" min-width="60">
          <template slot-scope="{row}">
            <span v-if="row.userSex === '0'">男</span>
            <span v-if="row.userSex === '1'">女</span>
          </template>
      </el-table-column>
      <el-table-column label="价格" align="center" min-width="80">
        <template slot-scope="{row}">
          <span>{{ row.price / 100 }} 元</span>
        </template>
      </el-table-column>
      <el-table-column label="权重" prop="weight" align="center" min-width="60" />
      <el-table-column label="状态" align="center" min-width="80">
          <template slot-scope="{row}">
              <el-switch v-model="row.status" size="small" :active-value="1" :inactive-value="0"
                  @change="handleStatusChange(row)" />
          </template>
      </el-table-column>
      <el-table-column label="使用数量" prop="usedNum" align="center" min-width="100" />
      <el-table-column label="真实使用数量" prop="realUsedNum" align="center" min-width="130" sortable="custom" />
      <el-table-column label="总收入" align="center" min-width="110" prop="totalPrice" sortable="custom">
        <template slot-scope="{row}">
          <span>{{ row.totalPrice / 100 }} 元</span>
        </template>
      </el-table-column>
      <el-table-column label="AI提示词" prop="prompt" align="center" show-overflow-tooltip min-width="100" />
      <el-table-column label="备注" prop="remark" align="center" show-overflow-tooltip min-width="140" />
      <el-table-column label="创建时间" align="center" min-width="140">
        <template slot-scope="{ row }">
          <span>{{ parseTime(row.createDate) }}</span>
        </template>
      </el-table-column>

      <el-table-column label="修改时间" align="center" min-width="140">
          <template slot-scope="{row}">
              <span>{{ parseTime(row.lastUpdate) }}</span>
          </template>
      </el-table-column>

      <el-table-column label="发布时间" align="center" min-width="140">
          <template slot-scope="{row}">
              <span>{{ parseTime(row.publishDate) }}</span>
          </template>
      </el-table-column>

      <el-table-column label="操作" align="center" min-width="140" fixed="right">
        <template slot-scope="{ row }">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="onEdit(row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="onDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { delTemplate, updateTemplateStatus } from '@/api/template'
export default {
  dicts: ['template_cat_type', 'template_own_type', 'template_user_type'],
  props: {
    loading: {
      type: Boolean,
      default() {
        return false;
      },
    },
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    page: {
      type: Object,
      default() {
        return {
          page: 1,
          size: 10,
        };
      },
    },
  },
  methods: {
      // 修改
      onEdit(row) {
          this.$emit('edit', row.uuid)
      },
      // 删除
      onDelete(row) {
          this.$confirm('是否删除该套系?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              return delTemplate(row.uuid)
          }).then(() => {
              this.$emit('delete')
              this.$modal.msgSuccess("删除成功")
          })
      },
    // 处理状态改变
    async handleStatusChange(row) {
        try {
          updateTemplateStatus({ uuid: row.uuid, status: row.status }).then (res => {
              this.$message.success('状态更新成功')
            })
        } catch (error) {
            console.error('更新状态失败:', error)
            this.$message.error('状态更新失败')
            row.status = row.status === 1 ? 0 : 1 // 恢复原状态
        }
    },
    handleSortChange({column, prop, order}) {
      console.log({column, prop, order})
      let params = {
        prop
      }
      if (order) {
        params.order = order === 'descending' ? 'desc' : 'asc'
      } else {
        params.order = null
      }
      this.$emit('sort', params)
    }
  }
};
</script>

<style lang="scss" scoped></style>